<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>uc浏览器</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			img{
				vertical-align: bottom;
				/* 对齐底线 */
			}
			li{
				list-style: none;
			}
			a{
				text-decoration:none;
			}
			.bd{
				border: 1px solid red;
			}
			.w{
				width: 986px;
				margin: 0 auto;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.clearfix::before,.clearfix::after{
				content:"";
				display: table;
			}
			.clearfix::after{
				clear: both;
			}
			header{
				position: fixed;
				background-color: aliceblue;
				width: 100%;
				z-index: 100;
				top: 0;
			}
			.logo{
				padding-top: 15px;
				padding-bottom: 12px;
			}
			.navigation{
				padding-right: 20px;
				padding-top: 5px;
			}
			.navigation>li{
				margin-left: 32px;
				padding: 0 10px;
				/* position: relative; */
			}
			/* 子元素 */
			.current{
				border-bottom: 3px solid orange;
			}
			.navigation a{
				display: block;
				font-size: 20px;
				line-height: 62px;
			}
			/* 一级导航 */
			.navigation>li:hover{
				border-bottom: 3px solid green;
			}
			.subnav{
				display: none;
				position: absolute;
				/* top: 0;
				left: 0; */
			}
			.navigation>li:hover .subnav{
				display: block;
			}
			.subnav li{
				background-color: yellow;
			}
			.subnav a{
				display: block;
				font-size: 16px;
				line-height: 25px;
			}
			/* 二级导航 */
			.main{
				padding-top: 70px;
			}
			.banner{
				height: 400px;
				background:#191919 url(images/banner.jpg)no-repeat center;
			}
			.icons{
				height: 145px;
				border-bottom: 1px solid #efefef;
			}
			.icon{
				width: 138px;
				padding-top: 58px;
				background: url(images/icon.png) no-repeat 49px 21px;
			}
			.icon:hover{
				background-position: 49px -99px;
			}
			.icon:nth-child(2){
				background-position: -90px 21px;
			}
			.icon:nth-child(2):hover{
				background-position: -90px -99px;
			}
			.icon:nth-child(3){
				background-position: -224px 21px;
				position: relative;
			}
			.icon:nth-child(3):hover{
				background-position: -224px -99px;
			}
			/* new图标 */
			.icon:nth-child(3)::before{
				content: "";
				width: 23px;
				height: 11px;
				background: url(images/icon.png)no-repeat -140px -280px;
				position: absolute;
				top: 15px;
				left: 82px;
			}
			.icon:nth-child(4){
				background-position: -363px 21px;
				position: relative;
			}
			.icon:nth-child(4):hover{
				background-position: -363px -99px;
			}
			.icon:nth-child(4)::before{
				content: "";
				width: 23px;
				height: 11px;
				background: url(images/icon.png)no-repeat -140px -280px;
				position: absolute;
				top: 15px;
				left: 82px;
			}
			.icon:nth-child(5){
				background-position: -505px 21px;
			}
			.icon:nth-child(5):hover{
				background-position: -505px -99px;
			}
			.icon:nth-child(6){
				background-position: -646px 21px;
			}
			.icon:nth-child(6):hover{
				background-position: -646px -99px;
			}
			.icon a{
				text-align: center;
				display: block;
				font-size: 11px;
				line-height: 81px;
				color: #666666;
			}
			.icons .w{
				position: relative;
			}
			.twocode{
				background: url(images/twocode.png)no-repeat;
				width: 128px;
				font-size: 11px;
				line-height: 71px;
				padding-top: 106px;
				text-align: center;
				position: absolute;
				top: -32px;
				right: -4px;
			}
			.news{
				
			}
			.news .new:nth-child(1)>.pic{
				background:#f2f2f2 url(images/activity_pic.jpg)no-repeat;
			}
			.news .new:nth-child(2)>.pic{
				background:#f2f2f2 url(images/news_pic.jpg)no-repeat;
			}
			.news .new:nth-child(3)>.pic{
				background:#f2f2f2 url(images/community_pic.jpg)no-repeat;
			}
			.news .new:nth-child(2){
				padding-left: 58px;
			}
			.news .new:nth-child(3){
				padding-left: 58px;
			}
			.pic{
				padding-top: 120px;
			}
			.new{
				width: 290px;
			}
			.title{
				padding-top: 20px;
			}
			.title h4{
				line-height: 61px;
				font-size: 19px;
			}
			.title a{
				position: relative;
				font-size: 12px;
				line-height: 58px;
				margin-right: 20px;
			}
			.title a::before{
				content: '';
				width: 6px;
				height: 6px;
				border: 2px solid red;
				border-left-color: transparent;
				border-bottom-color: transparent;
				transform: rotate(45deg);
				position: absolute;
				top: 24px;
				left: 22px;
				
			}
			/* .title div{
				width: 6px;
				height: 6px;
				border: 2px solid red;
				border-left-color: transparent;
				border-bottom-color: transparent;
				transform: rotate(45deg);
				margin-top: 6px;
			} */
			
			.pic a{
				font-size: 12px;
				line-height: 34px;
				display: block;
				text-align: center;
			}
			.new ul{
				padding-top: 18px;
				padding-bottom: 32px;
			}
			.new ul li{
				
			}
			.new ul li a{
				font-size: 13px;
				line-height: 26px;
				color: #383b4c;
			}
			footer{
				height: 471px;
				background-color: #333333;
			}
			.bo{
				padding-top: 45px;
				padding-bottom: 24px;
				border-bottom: 1px dashed;
			}
			.z{
				
			}
			footer .z:nth-child(1){
				padding-left: 0;
			}
			footer .z:nth-child(2){
				padding-left: 89px;
			}
			footer .z:nth-child(3){
				padding-left: 116px;
			}
			footer .z:nth-child(4){
				padding-left: 118px;
			}
			footer .z:nth-child(5){
				padding-left: 94px;
			}
			footer .z:nth-child(6){
				padding-left: 105px;
				position: relative;
			}
			footer .z:nth-child(6) h4{
				padding: 6px 67px 6px 28px;
				border: 1px solid #40474d;
			}
			footer .z:nth-child(6) h4::before{
				content: "";
				background: url(images/icon.png)no-repeat 0 -293px;
				width: 21px;
				height: 21px;
				position: absolute;
				left: 113px;
			}
			footer .z:nth-child(6) h4::after{
				content: "";
				background: url(images/icon.png)no-repeat -30px -293px;
				width: 22px;
				height: 22px;
				position: absolute;
				left: 212px;
			}
			footer .z:nth-child(6) a{
				padding-left: 28px;
			}
			/* footer .z:nth-child(6) .a{
				padding-left: 28px;
				position: relative;
			} */
			footer .z:nth-child(6) .a1::before{
				content: "";
				background: url(images/icon.png)no-repeat 0 -315px;
				width: 21px;
				height: 21px;
				position: absolute;
				left: 113px;
			}
			footer .z:nth-child(6) .a1:hover::before{
				background-position: -25px -315px;
			}
			footer .z:nth-child(6) .a2::before{
				content: "";
				background: url(images/icon.png)no-repeat 0 -340px;
				width: 21px;
				height: 21px;
				position: absolute;
				left: 113px;
			}
			footer .z:nth-child(6) .a2:hover::before{
				background-position: -25px -340px;
			}
			footer .z:nth-child(6) .a3::before{
				content: "";
				background: url(images/icon.png)no-repeat 0 -366px;
				width: 21px;
				height: 21px;
				position: absolute;
				left: 113px;
			}
			footer .z:nth-child(6) .a3:hover::before{
				background-position: -25px -366px;
			}footer .z:nth-child(6) .a4::before{
				content: "";
				background: url(images/icon.png)no-repeat 0 -393px;
				width: 21px;
				height: 21px;
				position: absolute;
				left: 113px;
			}
			footer .z:nth-child(6) .a4:hover::before{
				background-position: -25px -393px;
			}
			footer .z:nth-child(6) .a5::before{
				content: "";
				background: url(images/icon.png)no-repeat 0 -420px;
				width: 21px;
				height: 21px;
				position: absolute;
				left: 113px;
			}
			footer .z:nth-child(6) .a5:hover::before{
				background-position: -25px -420px;
			}
			footer .z:nth-child(6) .a6::before{
				content: "";
				background: url(images/icon.png)no-repeat 0 -446px;
				width: 21px;
				height: 21px;
				position: absolute;
				left: 113px;
			}
			footer .z:nth-child(6) .a6:hover::before{
				background-position: -25px -446px;
			}
			.z{
			}
			.z h4{
				font-size: 11px;
				color: #a6afac;
			}
			.z ul{}
			.z ul li{}
			.z ul li a{
				font-size: 11px;
				color: #a6afac;
			}
			.zi{
				height: 37px;
			}
			.zi ul{}
			.zi ul li{}
			.zi ul li a{
				font-size: 11px;
				color: #a8aaa9;
				line-height: 37px;
			}
			.zi ul li a::after{
				content: '';
				margin: 14px 6px 12px 8px;
				border: 1px solid #475467;
				border-top-color: transparent;
				border-left-color: transparent;
				/* border-right-color: transparent; */
				border-bottom-color: transparent;
			}
			.z .gd{
				font-size: 11px;
				color: #a8aaa9;
				line-height: 37px;
				text-align: center;
				position: absolute;
			}
			.z .gd::after{
				content: '';
				/* border-top-color: transparent; */
				/* border-left-color: transparent; */
				/* border-bottom-color: transparent; */
				/* border-right-color: transparent; */
				border-right: none;
				/* position: absolute; */
			}
			.zii{
				height: 37px;
			}
			.zii p{
				font-size: 11px;
				color: #656766;
				line-height: 37px;
				text-align: center;
			}
			.zii ul{}
			.zii ul li{}
			.zii ul li a{
				font-size: 11px;
				color: #a8aaa9;
				line-height: 37px;
				text-align: center;
			}
			.zii ul li a::after{
				content: '';
				margin: 14px 6px 12px 8px;
				border: 1px solid #475467;
				border-top-color: transparent;
				/* border-right-color: transparent; */
				border-bottom-color: transparent;
				border-left-color: transparent;
			}
			
			.zii ul li a .jfw::after{
				content: '';
				/* border-top-color: transparent;
				border-bottom-color: transparent; */
				border-right: none;
				/* border-left: none; */
				/* border-left-color: transparent;
				border-right-color: transparent; */
			}
			.zi{
				border-bottom: 1px dashed;
			}
			.zii{
				border-bottom: 1px dashed;
			}
			.xia{
				padding-left: 23px;
				padding-top: 20px;
			}
			.xia::after{
				content: '';
				padding-left: 23px;
				padding-top: 12px;
				background: url(images/icon.png)no-repeat -100px -280px;
			}
			.pi{
				height: 177px;
			}
			.pi_fl{
				width: 527px;
			}
			.pi_fl div:nth-child(1){
				padding-top: 31px;
			}
			.pi_fl p{
				padding-left: 132px;
				padding-top: 24px;
				font-size: 12px;
				line-height: 19px;
				color: #666560;
			}
			.pi_fr{
				padding-top: 24px;
			}
			.pi_fr div:nth-child(2n){
				padding-left: 15px;
			}
			.pi_fr div:nth-child(3){
				padding-left: 15px;
			}
		</style>
	</head>
	<body>
		<!-- 语义化标签 -->
		<header>
			<div class="w clearfix">
				<div class="logo fl"><img src="images/uclogo.png" alt=""></div>
				<ul class="navigation fr clearfix">
					<!-- 无序列表 -->
					<li class="fl current"><a href="">首页</a></li>
					<li class="fl"><a href="">下载</a>
						<ul class="subnav">
							<li><a href="">手机UC</a></li>
							<li><a href="">电脑浏览器</a></li>
							<li><a href="">TV浏览器</a></li>
						</ul>
					</li>
					<li class="fl"><a href="">公司</a></li>
					<li class="fl"><a href="">合作</a></li>
					<li class="fl"><a href="">社区</a></li>
					<li class="fl"><a href="">帮助</a></li>
				</ul>
			</div>
		</header>
		<div class="main">
			<div class="banner"></div>
			<div class="icons">
				<div class="w clearfix">
					<div class="icon fl"><a href=""> Android版下载</a></div>
					<div class="icon fl"><a href="">iPhone版下载</a></div>
					<div class="icon fl"><a href="">电脑版下载</a></div>
					<div class="icon fl"><a href="">Pad版下载</a></div>
					<div class="icon fl"><a href="">TV版下载</a></div>
					<div class="icon fl"><a href="">WP版下载</a></div>
					<div class="twocode">手机扫一扫下载</div>
				</div>
			</div>
			<div class="news w clearfix">
				<div class="new fl">
					<div class="title clearfix">
						<h4 class="fl">活动专区</h4>
						<!-- <div class="fr"></div> -->
						<a href="" class="fr">更多</a>
					</div>
					<div class="pic"><a href="">上uc.cn，下载抢100M流量礼包</a></div>
					<ul>
						<li><a href="">你没得到奖，因为你没有摇一摇</a></li>
						<li><a href="">第二季环保袋活动开放申请啦</a></li>
						<li><a href="">最壕UC微信号，天天送大奖</a></li>
						<li><a href="">UC省钱攻略大曝光：6000万红包等你来！</a></li>
						<li><a href="">手机浏览器成移动上网第一入口 UC稳居市场</a></li>
					<!-- ul>li*5>a -->
					</ul>
				</div>
				<div class="new fl">
					<div class="title clearfix">
						<h4 class="fl">新闻动态</h4>
						<!-- <div class="fr"></div> -->
						<a href="" class="fr">更多</a>
					</div>
					<div class="pic"><a href="">不断寻找合伙人 </a></div>
					<ul>
						<li><a href="">神马搜索与《梦想星搭档》展开娱乐内</a></li>
						<li><a href="">UC九游11月报告：《乱斗西游》成MOBA手</a></li>
						<li><a href="">UC浏览器“抢票帮”颠覆传统 亲朋好友</a></li>
						<li><a href="">UC浏览器新版造就极致视频体验</a></li>
						<li><a href="">手机浏览器使用频率仅次于即时通讯</a></li>
					</ul>
				</div>
				<div class="new fl">
					<div class="title clearfix">
						<h4 class="fl">社区热帖</h4>
						<!-- <div class="fr"></div> -->
						<a href="" class="fr">更多</a>
					</div>
					<div class="pic"><a href="">UC浏览器抢票帮正式发布！团结一切力量</a></div>
					<ul>
						<li><a href="">UC浏览器Android版10.0皮肤制作教程</a></li>
						<li><a href="">年底求加薪技巧！哥拼的是拍马屁的技巧</a></li>
						<li><a href="">UC浏览器抢票帮——召唤朋友一起帮你抢</a></li>
						<li><a href="">UC姐神秘面容首次曝光，多图胆小慎入</a></li>
						<li><a href="">【uc记者团】2015年春节回家 攻略</a></li>
					</ul>
				</div>
			</div>
		</div>
		<footer>
		<div class="bo w clearfix">
			<div class="z fl">
				<h4>UC浏览器</h4>
				<ul>
					<li><a href="">产品动态</a></li>
					<li><a href="">功能介绍</a></li>
					<li><a href="">安卓浏览器</a></li>
					<li><a href="">iPhone浏览器</a></li>
					<li><a href="">电脑浏览器</a></li>
					<li><a href="">WP浏览器</a></li>
					<li><a href="">iPad浏览器</a></li>
					<li><a href="">aPad浏览器</a></li>
					<li><a href="">TV浏览器</a></li>
					<li><a href="">塞班浏览器</a></li>
				</ul>
			</div>
			<div class="z fl">
				<h4>公司</h4>
				<ul>
					<li><a href="">公司首页</a></li>
					<li><a href="">公司概况</a></li>
					<li><a href="">公司动态</a></li>
					<li><a href="">管理团队</a></li>
					<li><a href="">企业文化</a></li>
					<li><a href="">粉丝专区</a></li>
					<li><a href="">荣誉之旅</a></li>
					<li><a href="">联系我们</a></li>
					<li><a href="">投资者</a></li>
					<li><a href="">UC闪屏</a></li>
				</ul>
			</div>
			<div class="z fl">
				<h4>其它产品</h4>
				<ul>
					<li><a href="">UC九游</a></li>
					<li><a href="">PP助手</a></li>
					<li><a href="">神马搜索</a></li>
					<li><a href="">UC云</a></li>
					<li><a href="">U点充值</a></li>
					<li><a href="">用户中心</a></li>
					<li><a href="">体验中心</a></li>
					<li><a href="">帮助中心</a></li>
					<li><a href="">意见反馈</a></li>
				</ul>
			</div>
			<div class="z fl">
				<h4>开放合作</h4>
				<ul>
					<li><a href="">游戏开放平台</a></li>
					<li><a href="">运营商合作</a></li>
					<li><a href="">终端厂商合作</a></li>
					<li><a href="">互联网合作</a></li>
					<li><a href="">开发者中心</a></li>
					<li><a href="">战略投资</a></li>
				</ul>
			</div>
			<div class="z fl">
				<h4>招聘</h4>
				<ul>
					<li><a href="">社会招聘</a></li>
					<li><a href="">人才推荐</a></li>
					<li><a href="">校园招聘</a></li>
					<li><a href="">实习生招聘</a></li>
					<li><a href="">内部推荐</a></li>
					<li><a href="">走进UC</a></li>
				</ul>
			</div>
			<div class="z fl">
				<h4>中文版</h4>
				<div class="uc">
					<ul>
						<li class="a1"><a href="">手机站</a></li>
						<li class="a2"><a href="">Pad站</a></li>
						<li class="a3"><a href="">TV站</a></li>
						<li class="a4"><a href="">UC浏览器微博</a></li>
						<li class="a5"><a href="">UC浏览器贴吧</a></li>
						<li class="a6"><a href="">UC浏览器微信</a></li>
					</ul>
				</div>
			</div>
			</div>
		<div class="zi w clearfix">
			<ul>
				<li class="fl"><a href="">阿里巴巴集团</a></li>
				<li class="fl"><a href="">淘宝网</a></li>
				<li class="fl"><a href="">天猫</a></li>
				<li class="fl"><a href="">聚划算</a></li>
				<li class="fl"><a href="">全球速卖通</a></li>
				<li class="fl"><a href="">阿里巴巴国际交易市场</a></li>
				<li class="fl"><a href="">1688</a></li>
				<li class="fl"><a href="">阿里妈妈</a></li>
				<li class="fl"><a href="">阿里旅行·去啊</a></li>
				<li class="fl"><a href="">阿里云计算</a></li>
				<li class="fl"><a href="">YunOS</a></li>
				<li class="fl"><a href="">阿里通信</a></li>
				<li class="fl"><a href="">万网</a></li>
				<li class="fl gd"><a href="">高德</a></li>
			</ul>
			<div class="fr xia"></div>
		</div>
		<div class="zii w clearfix">
			<div class="fl"><p>友情链接：</p></div>
			<ul>
				<li class="fl"><a href="">手机游戏</a></li>
				<li class="fl"><a href="">网易科技</a></li>
				<li class="fl"><a href="">dospy智能手机网</a></li>
				<li class="fl"><a href="">历趣手机软件</a></li>
				<li class="fl"><a href="">威锋网</a></li>
				<li class="fl"><a href="">小说全搜</a></li>
				<li class="fl"><a href="">IT之家</a></li>
				<li class="fl"><a href="">前瞻网</a></li>
				<li class="fl"><a href="">手机软件下载</a></li>
				<li class="fl"><a href="">pc6下载</a></li>
				<li class="fl"><a href="">KK语音</a></li>
				<li class="fl"><a href="">安卓市场</a></li>
				<li class="fl jfw"><a href="">机锋网</a></li>
			</ul>
		<div class="fr xia"></div>
		</div>
		<div class="pi w">
			<div class="fl pi_fl">
				<div class="fl"><img src="images/logo_company.png" alt=""></div>
				<div><p>&copy 2004-2014 uc.cn 版权所有 网络文化经营许可证：文网文[2010]176号
						中华人民共和国互联网药品信息服务资格证：（粤）-非经营性-2011-0120
						增值电信业务经营许可证: 粤B2-20070379 粤ICP备09210879号</p></div>
			</div>
			<div class="fr pi_fr">
				<div class="fl"><img src="images/qa_wen.png" alt=""></div>
				<div class="fl"><img src="images/gs.png" alt=""></div>
				<div class="fl"><img src="images/knet_cn.png" alt=""></div>
				<div class="fl"><img src="images/anva.png" alt=""></div>
			</div>
		</div>
		</footer>
	</body>
</html>
